<template>
    <el-aside width="300px">
        <el-menu
        default-active="1"
        class="el-menu-vertical-demo">
        <router-link to="/main/statistic" class="menu-link">
          <el-menu-item index="1">
            <el-icon size="30px" style="color: #415058;"><HomeFilled /></el-icon>
            <span>首页</span>
          </el-menu-item>
        </router-link>
        <router-link to="/main/course" class="menu-link">
          <el-menu-item index="2">
            <el-icon size="30px" style="color: #415058;"><Notebook /></el-icon>
            <span>课程</span>
        </el-menu-item>
        </router-link>
        <router-link to="/main/learnpartner" class="menu-link">
          <el-menu-item index="3">
            <el-icon size="30px" style="color: #415058;"><UserFilled /></el-icon>
            <span>学习伙伴</span>
        </el-menu-item></router-link>
        <router-link to="/main/learnplan" class="menu-link">
          <el-menu-item index="4">
            <el-icon size="30px" style="color: #415058;"><Calendar /></el-icon>
            <span>个性化学习方案</span>
          </el-menu-item>
        </router-link>
        <router-link to="/main/personalcenter" class="menu-link">
          <el-menu-item index="5">
            <el-icon size="30px" style="color: #415058;"><Grid /></el-icon>
            <span>个人中心</span>
        </el-menu-item>
        </router-link>
        
      </el-menu>
    </el-aside>
</template>

<script>
export default{
    methods: {
        
    },
}
</script>

<style>
.menu-link {
  text-decoration: none;
}

.el-menu-item {
  border-radius: 20px;
  height: 80px;
}

.el-menu-item:hover {
  background-color: transparent;
}

.el-menu-item.is-active {
  background-color: #C6E4B6;
}
.el-menu-item span {
  font-size: 23px; /* 修改文字的大小 */
  margin-left: 8px;
  color:#415058;
}
.el-aside {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  height: 3000px; /* 设置菜单的高度为100%视窗高度 */
}
.el-menu {
  flex: 1; /* 让菜单占满剩余空间 */
  border:0!important;
}

</style>